<template>
  <div ref="pageComBox" class="all_into_page page_wrapper">
    <div ref="otherBox">
      <!-- 搜索区域 开始 -->
      <div class="search_box">
        <el-form :model="searchForm" :inline="true" size="small">
          <el-form-item label="手机号码：">
            <el-input v-model="searchForm.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getList()"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 搜索区域 end -->
    </div>

    <!-- 列表区域 开始 -->
    <div class="">
      <el-table
        ref="multipleTable"
        class="el_table"
        :data="dataList"
        border
        :max-height="tableHeight"
        :key="tableHeight"
        v-tabscroll="$getTableHeight"
      >
        <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column label="发送内容" prop="content"></el-table-column>
        <el-table-column label="手机号码" prop="mobile"></el-table-column>
        <el-table-column label="发送时间" prop="createDate"></el-table-column>
      </el-table>
      <BasePagination
        v-model="page"
        :total="totalCount"
        @change="pageOnChange"
      />
    </div>
    <!-- 列表区域 end -->
  </div>
</template>
<script>
import { deepClone, showModal, showToast } from "@/utils/util";
import { GET_MESSAGE_RECORD } from "@/http/system";
export default {
  data() {
    return {
      searchForm: {},
      page: 1,
      pageSize: 100,
      dataList: [],
      totalCount: 0,
      tableHeight: 0,
    };
  },
  mounted() {
    this.getList();
    // 计算表格的高度
    let _this = this;
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    // 分页切换事件
    pageOnChange(row) {
      this.page = row.page;
      if (row.pageSize) {
        this.pageSize = row.pageSize;
      }
      this.getList();
    },

    // 获取参数
    getParams() {
      const oParams = {};
      const o = deepClone(this.searchForm);
      oParams.size = this.pageSize;
      oParams.paramObject = o;
      return oParams;
    },

    // 获取列表
    getList(current) {
      const oParams = this.getParams();
      oParams.page = current || this.page;
      GET_MESSAGE_RECORD(oParams).then((res) => {
        let obj = res.data || {};
        this.dataList = obj.dataList || [];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.all_into_page {
  padding: 20px;
}
</style>
  